<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">返回</a>
  <!--课程分类-->
<div data-role="page" id="pageone">
 
  <div data-role="panel" id="revealPanel" data-display="reveal"> 
    <h2>课程分类：</h2>
    <ul data-role="listview">
      <li><a href="#">吉他</a></li>
      <li><a href="#">笛萧</a></li>
      <li><a href="#">琴</a></li>
    </ul>
   
  </div>  

  <div data-role="header">
  	 <a href="index.html" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">返回主页</a>
    <h1>所有课程</h1>
   
  </div>

  <div data-role="main" class="ui-content">
    <p>点击下列按钮检索</p>
    
     <a href="#revealPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">类别</a>
      <a href="#pageone" class="ui-btn ui-btn-inline ui-corner-all ">搜索</a>
     
      
      
      <h2>吉他</h2>
    <ul data-role="listview" data-inset="true">
      <li>
        <a href="courseDetail.html">
        <img src="img/guitar.jpg">
        <h2>吉他入门</h2>
        <p>欢迎各位吉他爱好者</p>
        </a>
      </li>
      <li>
        <a href="#">
        <img src="img/guitar.jpg">
        <h2>吉他</h2>
        <p>欢饮吉他爱好者</p>
        </a>
      </li>
    </ul>
    
     <h2>笛萧</h2>
    <ul data-role="listview" data-inset="true">
      <li>
        <a href="#">
        <img src="img/flute.jpg">
        <h2>笛子入门</h2>
        <p>欢迎各位笛子爱好者</p>
        </a>
      </li>
      <li>
        <a href="#">
        <img src="img/flute.jpg">
        <h2>洞萧入门</h2>
        <p>欢迎各位洞箫爱好者</p>
        </a>
      </li>
    </ul>
    
     <h2>琴</h2>
    <ul data-role="listview" data-inset="true">
      <li>
        <a href="#">
        <img src="img/piano.jpg">
        <h2>钢琴</h2>
        <p>欢迎各位钢琴爱好者</p>
        </a>
      </li>
      <li>
        <a href="#">
        <img src="img/violin.jpg">
        <h2>小提琴</h2>
        <p>欢迎小提琴爱好者</p>
        </a>
      </li>
    </ul>
  </div>

  <div data-role="footer">
    <h1>版权所有</h1>
  </div> 
</div> 



<!--
	弹窗搜索
-->
<div data-role="page" data-dialog="true" id="pageone">
  

  <div data-role="main" class="ui-content">
      	 <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">返回</a>
  	
   <form method="post" action="java.asp">
      <div class="ui-field-contain">

        <label for="search">搜索：</label>
        <input type="search" name="search" id="search" placeholder="搜索内容...">
      </div>
      <input type="submit" data-inline="true" value="提交">
    </form> 
  </div>

  
</div>
</body>
</html>
